spb/svgarden Public

1---2/**3 * ============================================================4 * SVGarden — https://www.svgarden.dev5 * Author : Simon-Pierre Boucher6 * Contact: contact@spboucher.ai7 * File   : src/pages/category/[cat].astro8 * Desc   : Per-category gallery page9 * ============================================================10 */11import Base from '../../layouts/Base.astro';12import SnippetCard from '../../components/SnippetCard.astro';13import { loadSnippets, loadCategories } from '../../lib/snippets.mjs';1415export async function getStaticPaths() {16  const categories = await loadCategories();17  return categories.map((c) => ({ params: { cat: c.name } }));18}1920const { cat } = Astro.params;21const snippets = (await loadSnippets()).filter((s) => s.category === cat);22const categories = await loadCategories();23---2425<Base26  title={`${cat} — SVGarden`}27  description={`${snippets.length} self-contained ${cat} SVG + CSS animation snippets — preview, customize, copy.`}28>29  <section class="sg-hero">30    <p class="sg-breadcrumb"><a href="/">Gallery</a> / {cat}</p>31    <h1>{cat}</h1>32    <p>{snippets.length} snippet{snippets.length === 1 ? '' : 's'} in this category.</p>33  </section>3435  <div class="sg-toolbar">36    <div class="sg-chips" aria-label="Categories">37      <a class="sg-chip" href="/">All</a>38      {39        categories.map((c) => (40          <a class={`sg-chip${c.name === cat ? ' sg-chip-active' : ''}`} href={`/category/${c.name}`}>41            {c.name} · {c.count}42          </a>43        ))44      }45    </div>46  </div>4748  <div class="sg-grid">49    {snippets.map((s) => <SnippetCard snippet={s} />)}50  </div>51</Base>52